//搜索框图标hover效果
var SearchIcon = document.querySelector("#Page1Search");
SearchIcon.firstElementChild.onmouseover = function () {
  SearchIcon.firstElementChild.src = "../images/Page1_SearchIconFocus.png";
};
SearchIcon.firstElementChild.onmouseout = function () {
  SearchIcon.firstElementChild.src = "../images/Page1_SearchIconBlur.png";
};

//左侧导航下拉菜单
var LeftNavBtn = document.getElementsByClassName("BannerLeftNav");
for (var i = 0; i < LeftNavBtn.length; i++) {
  LeftNavBtn[i].nextElementSibling.style.display = "flex";
  LeftNavBtn[i].onclick = function () {
    if (this.nextElementSibling.style.display == "none") {
      this.nextElementSibling.style.display = "flex";
      this.lastElementChild.firstElementChild.style.transform =
        "rotate(180deg)";
    } else {
      this.nextElementSibling.style.display = "none";
      this.lastElementChild.firstElementChild.style.transform = "rotate(90deg)";
    }
  };
}

$("#SelfLoginSetBox div")
  .eq(1)
  .click(function () {
    location.href = "./Login_page.html";
  });
$("#GotoRSDD").click(function () {
  location.href = "./tjy_pages/Personnel_transfers.html";
});
$("#GotoZCPD").click(function () {
  location.href = "./Asses_Count.html";
});

//查看红点消息界面的弹出
var SelfNews = document.querySelector("#NewsImg");
var SelfNewsShow = document.querySelector("#SelfNewsShow");
var MaskLayer = document.getElementById("MaskLayer");
var SelfNewsClose = document.getElementById("SelfNewsClose");
var NewsShowTimer;
var NewsHideTimer;
window.onscroll = function () {
  SelfNewsShow.style.top = document.documentElement.scrollTop + "px";
};
SelfNews.onclick = function () {
  clearTimeout(NewsHideTimer);
  SelfNewsShow.style.display = "flex";
  MaskLayer.style.display = "block";
  NewsShowTimer = setTimeout(NewsShow, 4);
};
MaskLayer.onclick = function () {
  clearTimeout(NewsShowTimer);
  SelfNewsShow.style.right = "-500px";
  MaskLayer.style.display = "none";
  NewsHideTimer = setTimeout(NewsHide, 200);
};
SelfNewsClose.onclick = function () {
  SelfNewsShow.style.right = "-500px";
  MaskLayer.style.display = "none";
  NewsHideTimer = setTimeout(NewsHide, 200);
};
function NewsShow() {
  SelfNewsShow.style.right = 0;
}
function NewsHide() {
  SelfNewsShow.style.display = "none";
}

//个人信息点击设置登录
var SelfSet = $("#SelfSetBox");
var SelfLoginSetBox = $("#SelfLoginSetBox");
SelfSet.click(function () {
  SelfLoginSetBox.slideToggle(200);
});
//应用中心选项按钮框
var AppBtn = document.getElementById("Page1AppIcon");
var AppShow = document.getElementById("AppShow");
var AppShowBox = document.getElementById("AppShowBox");
var AppShowHideTimer;
var AppShowShowTimer;
AppShowBox.style.top = "-400px";
AppBtn.onclick = function () {
  if (AppShowBox.style.top == "-400px") {
    clearTimeout(AppShowHideTimer);
    AppShowShowTimer = setTimeout(AppShowShow, 4);
    AppShow.style.display = "flex";
  } else {
    clearTimeout(AppShowShow);
    AppShowBox.style.top = "-400px";
    AppShowHideTimer = setTimeout(AppShowHide, 100);
  }
};
function AppShowHide() {
  AppShow.style.display = "none";
}
function AppShowShow() {
  AppShowBox.style.top = "3px";
}

//banner图标hover效果
var BannerSearch = document.querySelector("#BannerSearch");
BannerSearch.lastElementChild.onmouseover = function () {
  this.src = "../images/Page1_SearchIconFocus.png";
};
BannerSearch.lastElementChild.onmouseout = function () {
  this.src = "../images/Page1_BannerSearch.png";
};

var BannerUp = document.querySelectorAll(".BannerUp");
var BannerDown = document.querySelectorAll(".BannerDown");
var BannerSet = document.querySelector(".BannerSet");
BannerUp[0].onmousedown = function () {
  this.src = "../images/Page1_BannerTableUpArrowFocus.png";
};
BannerUp[0].onmouseup = function () {
  this.src = "../images/Page1_BannerTableUpArrow.png";
};
BannerUp[1].onmousedown = function () {
  this.src = "../images/Page1_BannerTableUpArrowFocus.png";
};
BannerUp[1].onmouseup = function () {
  this.src = "../images/Page1_BannerTableUpArrow.png";
};
BannerDown[0].onmousedown = function () {
  this.src = "../images/Page1_BannerTableUpArrowFocus.png";
};
BannerDown[0].onmouseup = function () {
  this.src = "../images/Page1_BannerTableUpArrow.png";
};
BannerDown[1].onmousedown = function () {
  this.src = "../images/Page1_BannerTableUpArrowFocus.png";
};
BannerDown[1].onmouseup = function () {
  this.src = "../images/Page1_BannerTableUpArrow.png";
};
BannerSet.onmouseover = function () {
  this.src = "../images/Page1_BannerTableSetting.png";
};
BannerSet.onmouseout = function () {
  this.src = "../images/Page1_BannerTableSet.png";
};

var StuffDataArr = [
  {
    portrait: "../images/Page1_BannerTablePortrait.png",
    name: "1111",
    id: "GH000001",
    department: "黛西进出口贸易公司 / 研发部",
    position: "产品经理",
    tel: "19220880099",
    joinDate: "2022-07-22",
    probation: "3个月",
    confirmationDate: "2022-10-22",
    approval: "未发起",
  },
  {
    portrait: "../images/Page1_BannerTablePortrait.png",
    name: "22222",
    id: "GH000002",
    department: "黛西进出口贸易公司 / 研发部",
    position: "产品经理",
    tel: "19220880092",
    joinDate: "2022-07-22",
    probation: "3个月",
    confirmationDate: "2022-10-22",
    approval: "未发起",
  },
  {
    portrait: "../images/Page1_BannerTablePortrait.png",
    name: "333333",
    id: "GH0011002",
    department: "黛西进出口贸易公司 / 研发部",
    position: "产品经理",
    tel: "19220880092",
    joinDate: "2022-07-22",
    probation: "3个月",
    confirmationDate: "2022-10-22",
    approval: "未发起",
  },
  {
    portrait: "../images/Page1_BannerTablePortrait.png",
    name: "44444",
    id: "GH00102",
    department: "黛西进贸易公司 / 研发部",
    position: "产品经理",
    tel: "19220880092",
    joinDate: "2022-07-22",
    probation: "3个月",
    confirmationDate: "2022-10-22",
    approval: "未发起",
  },
  {
    portrait: "../images/Page1_BannerTablePortrait.png",
    name: "55555555",
    id: "GH0134002",
    department: "黛西进出贸易公司 / 研发部",
    position: "产品经理",
    tel: "19220880092",
    joinDate: "2022-07-22",
    probation: "3个月",
    confirmationDate: "2022-10-22",
    approval: "未发起",
  },
  {
    portrait: "../images/Page1_BannerTablePortrait.png",
    name: "66666666",
    id: "GH0gret2",
    department: "黛西进出口贸易公司 / 研发部",
    position: "产经理",
    tel: "19220092",
    joinDate: "2022-07-22",
    probation: "3个月",
    confirmationDate: "2022-10-22",
    approval: "未发起",
  },
  {
    portrait: "../images/Page1_BannerTablePortrait.png",
    name: "77777777",
    id: "GH0234002",
    department: "黛西进出口贸易公司 / 研发部",
    position: "产品经理",
    tel: "192202",
    joinDate: "2022-07-22",
    probation: "3个月",
    confirmationDate: "2022-10-22",
    approval: "未发起",
  },
  {
    portrait: "../images/Page1_BannerTablePortrait.png",
    name: "88888888",
    id: "GH034bbvr02",
    department: "黛西进出口贸易公司 / 研发部",
    position: "产品经理",
    tel: "19220880092",
    joinDate: "2022-07-22",
    probation: "3个月",
    confirmationDate: "2022-10-22",
    approval: "未发起",
  },
  {
    portrait: "../images/Page1_BannerTablePortrait.png",
    name: "99999999",
    id: "GH0sdfg02",
    department: "黛西进出口贸易公司 / 研发部",
    position: "产品经理",
    tel: "19220880092",
    joinDate: "2022-07-22",
    probation: "3个月",
    confirmationDate: "2022-10-22",
    approval: "未发起",
  },
  {
    portrait: "../images/Page1_BannerTablePortrait.png",
    name: "1111111",
    id: "GH0002333",
    department: "黛西进出口 / 研发部",
    position: "产品经理",
    tel: "19220880092",
    joinDate: "2022-07-22",
    probation: "3个月",
    confirmationDate: "2022-10-22",
    approval: "未发起",
  },
  {
    portrait: "../images/Page1_BannerTablePortrait.png",
    name: "222222222",
    id: "GH033302",
    department: "黛西进出口贸易公司 / 研发部",
    position: "产品理",
    tel: "1920092",
    joinDate: "2022-07-22",
    probation: "3个月",
    confirmationDate: "2022-10-22",
    approval: "未发起",
  },
  {
    portrait: "../images/Page1_BannerTablePortrait.png",
    name: "33333333",
    id: "G0023333333",
    department: "黛西进出口贸易公司 / 研发部",
    position: "产品经理",
    tel: "192280092",
    joinDate: "2022-07-22",
    probation: "3个月",
    confirmationDate: "2022-10-22",
    approval: "未发起",
  },
  {
    portrait: "../images/Page1_BannerTablePortrait.png",
    name: "444444444",
    id: "GH00324563542",
    department: "黛西进出口贸易公司 / 研发部",
    position: "产品经理",
    tel: "19220880092",
    joinDate: "2022-07-22",
    probation: "3个月",
    confirmationDate: "2022-10-22",
    approval: "未发起",
  },
  {
    portrait: "../images/Page1_BannerTablePortrait.png",
    name: "5555555",
    id: "GH0034532",
    department: "黛西进出口贸易公司 / 研发部",
    position: "产品经理",
    tel: "19220880092",
    joinDate: "2022-07-22",
    probation: "3个月",
    confirmationDate: "2022-10-22",
    approval: "未发起",
  },
  {
    portrait: "../images/Page1_BannerTablePortrait.png",
    name: "66666666",
    id: "GH0008568795689002",
    department: "黛西进出口贸易公司 / 研发部",
    position: "产品经理",
    tel: "19220880092",
    joinDate: "2022-07-22",
    probation: "3个月",
    confirmationDate: "2022-10-22",
    approval: "未发起",
  },
  {
    portrait: "../images/Page1_BannerTablePortrait.png",
    name: "7777777777",
    id: "GH000j76002",
    department: "黛西进出口贸易公司 / 研发部",
    position: "产品经理",
    tel: "19220880092",
    joinDate: "2022-07-22",
    probation: "3个月",
    confirmationDate: "2022-10-22",
    approval: "未发起",
  },
  {
    portrait: "../images/Page1_BannerTablePortrait.png",
    name: "8888888888",
    id: "GH0000j702",
    department: "黛西进出口贸易公司 / 研发部",
    position: "产品经理",
    tel: "19220880092",
    joinDate: "2022-07-22",
    probation: "3个月",
    confirmationDate: "2022-10-22",
    approval: "未发起",
  },
  {
    portrait: "../images/Page1_BannerTablePortrait.png",
    name: "99999999",
    id: "G7j002",
    department: "黛西进出口贸易公司 / 研发部",
    position: "产品经理",
    tel: "19220880092",
    joinDate: "2022-07-22",
    probation: "3个月",
    confirmationDate: "2022-10-22",
    approval: "未发起",
  },
  {
    portrait: "../images/Page1_BannerTablePortrait.png",
    name: "111111111111",
    id: "GH7ui002",
    department: "黛西进出口贸易公司 / 研发部",
    position: "产品经理",
    tel: "19220880092",
    joinDate: "2022-07-22",
    probation: "3个月",
    confirmationDate: "2022-10-22",
    approval: "未发起",
  },
  {
    portrait: "../images/Page1_BannerTablePortrait.png",
    name: "2222222222",
    id: "G5678902",
    department: "黛西进出口贸易公司 / 研发部",
    position: "产品经理",
    tel: "19220880092",
    joinDate: "2022-07-22",
    probation: "3个月",
    confirmationDate: "2022-10-22",
    approval: "未发起",
  },
];

var page = 1;
var count = 6;
var StuffTable = document.querySelector("tbody");
var oPage = document.querySelector(".pagination");
var str = "";
//下面是搜索功能····························
var BannerSearchBtn = BannerSearch.lastElementChild;
BannerSearchBtn.onclick = function () {
  str = BannerSearch.firstElementChild.value;
  page = 1;
  render();
};
var data = [];
var tempArr = [];
render();
function render() {
  for (var i = 0; i < StuffDataArr.length; i++) {
    var num = i;
    for (var key in StuffDataArr[i]) {
      StuffDataArr[i].constantNum = num + "";
    }
  }
  //先渲染搜索的功能
  data = [];
  tempArr = [];
  if (str.trim() == "") {
    data = StuffDataArr;
  } else {
    StuffDataArr.filter(function (json) {
      for (var key in json) {
        if (json[key].includes(str)) {
          data.push(json);
        }
      }
    });
    tempArr = [];
    for (var i = 0; i < data.length; i++) {
      if (tempArr.indexOf(data[i]) == -1) {
        tempArr.push(data[i]);
      }
    } //搜索结果去重
    data = tempArr;
  }

  //下面渲染页面数据
  StuffTable.innerHTML = "";
  var renderArr = data.slice((page - 1) * count, page * count);
  if (data.length == 0) {
    StuffTable.previousElementSibling.innerHTML = `<h1 style="width:100%;text-align:center;">未搜索到符合条件的结果！</h1>`;
    StuffTable.innerHTML = "";
    oPage.innerHTML = "";
  } else {
    StuffTable.previousElementSibling.innerHTML = `<td><input type="checkbox" class="CheckBox"/></td>
    <td>头像 / 姓名</td>
    <td>员工编号</td>
    <td>部门</td>
    <td>
      <div class="TableSpec">
        职位
        <div>
          <img
            src="../images/Page1_BannerTableUpArrow.png"
            class="BannerUp"
          />
          <img
            style="transform: rotate(180deg); margin-top: 2px"
            src="../images/Page1_BannerTableUpArrow.png"
            class="BannerDown"
          />
        </div>
      </div>
    </td>
    <td>
      <div class="TableSpec">
        手机号码
        <div>
          <img
            src="../images/Page1_BannerTableUpArrow.png"
            class="BannerUp"
          />
          <img
            style="transform: rotate(180deg); margin-top: 2px"
            src="../images/Page1_BannerTableUpArrow.png"
            class="BannerDown"
          />
        </div>
      </div>
    </td>
    <td>入职日期</td>
    <td>试用期</td>
    <td>转正日期</td>
    <td>审批状态</td>
    <td>
      <div class="TableSpec">
        操作
        <img
          style="width: 13px; height: 14px; margin-left: 5px"
          src="../images/Page1_BannerTableSet.png"
          class="BannerSet"
        />
      </div>
    </td>`;

    oPage.innerHTML = `<li id="PrePage">
    <a>
      <span>&laquo;</span>
    </a>
  </li>
  <li class="active"><a class="PageBtn">1</a></li>
  <li id="NextPage">
    <a>
      <span>&raquo;</span>
    </a>
  </li>`;
    for (var i = 0; i < renderArr.length; i++) {
      var oTr = document.createElement("tr");
      oTr.innerHTML = `
    <td><input type="checkbox" class="CheckBox"/></td>
    <td>
    <div style="color: #2561ef; cursor: pointer">
    <img
    src=${renderArr[i].portrait}
    alt=""
    />${renderArr[i].name}
    </div>
    </td>
    <td>${renderArr[i].id}</td>
    <td>${renderArr[i].department}</td>
    <td>${renderArr[i].position}</td>
    <td>${renderArr[i].tel}</td>
    <td>${renderArr[i].joinDate}</td>
    <td>${renderArr[i].probation}</td>
    <td>${renderArr[i].confirmationDate}</td>
    <td>${renderArr[i].approval}</td>
    <td>
    <a class="BannerSets" href="#">发起转正审批</a>
    <a class="BannerSets" href="#">手动办理转正</a>
    </td>
    `;
      StuffTable.appendChild(oTr);
    }
    //下面是多选框
    var CheckBox = document.querySelectorAll(".CheckBox");
    var CheckNum = 0;
    CheckBox[0].onclick = function () {
      if (CheckBox[0].checked) {
        for (var i = 1; i < CheckBox.length; i++) {
          CheckBox[i].checked = true;
        }
        CheckNum = CheckBox.length - 1;
      } else {
        for (var i = 1; i < CheckBox.length; i++) {
          CheckBox[i].checked = false;
        }
        CheckNum = 0;
      }
    };
    for (var i = 1; i < CheckBox.length; i++) {
      CheckBox[i].onclick = function () {
        if (this.checked) {
          CheckNum++;
        } else {
          CheckNum--;
        }
        if (CheckNum == CheckBox.length - 1) {
          CheckBox[0].checked = true;
        } else {
          CheckBox[0].checked = false;
        }
      };
    }

    //下面是渲染分页器
    var PrePage = document.getElementById("PrePage");
    var NextPage = document.getElementById("NextPage");
    var aPage = document.querySelectorAll(".PageBtn");
    for (var i = 0; i < aPage.length; i++) {
      oPage.removeChild(aPage[i].parentNode);
    }
    for (var i = 0; i < Math.ceil(data.length / count); i++) {
      var oLi = document.createElement("li");
      oLi.innerHTML = `<a class="PageBtn">${i + 1}</a>`;
      if (i + 1 == page) {
        oLi.classList.add("active");
      }
      oPage.insertBefore(oLi, oPage.lastElementChild);
    }
    aPage = document.querySelectorAll(".PageBtn");
    if (aPage[0].parentNode.className == "active") {
      PrePage.classList.add("disabled");
    } else {
      PrePage.classList.remove("disabled");
    }
    if (aPage[aPage.length - 1].parentNode.className == "active") {
      NextPage.classList.add("disabled");
    } else {
      NextPage.classList.remove("disabled");
    }
    //下面是分页器功能···························
    oPage.onclick = function () {
      if (event.target.className == "PageBtn") {
        page = event.target.innerText;
        render();
      }
    };
    PrePage.onclick = function () {
      if (page > 1) {
        page--;
      }
      render();
    };
    NextPage.onclick = function () {
      var aPage = document.querySelectorAll(".PageBtn");
      if (page < aPage.length) {
        page++;
      }
      render();
    };
  }
}

//选择部门弹出框功能``````````````````````````````````````````````````````````````
var ChooseDepartBtn = $("#ChooseDepartBtn");
var BannerDepartMaskLayer = $("#BannerDepartMaskLayer");
var BannerDepartLayer = $("#BannerDepartLayer");
ChooseDepartBtn.click(function () {
  BannerDepartMaskLayer.show();
  BannerDepartLayer.fadeIn();
  BannerDepartLayer.css("display", "flex");
});
BannerDepartMaskLayer.click(function () {
  BannerDepartLayer.fadeOut();
  BannerDepartMaskLayer.hide();
});
BannerDepartLayer.click(function () {
  event.cancelBubble = true;
});
//下面这个是右上角的的小叉叉
var BannerDepartClose = BannerDepartLayer.children().first().children().last();
BannerDepartClose.mouseover(function () {
  $(this).attr("src", "../images/Page1_BannerDepartCloseFocus.png");
});
BannerDepartClose.mouseout(function () {
  $(this).attr("src", "../images/Page1_BannerDepartClose.png");
});
BannerDepartClose.click(function () {
  BannerDepartLayer.fadeOut();
  BannerDepartMaskLayer.hide();
});
//下面是搜索图标效果
var BannerDepartSearchBtn =
  document.querySelector("#ShowZoneSearch").lastElementChild;
BannerDepartSearchBtn.onmouseover = function () {
  BannerDepartSearchBtn.src = "../images/Page1_SearchIconFocus.png";
};
BannerDepartSearchBtn.onmouseout = function () {
  BannerDepartSearchBtn.src = "../images/Page1_BannerSearch.png";
};
//下面是展示区点叉叉去掉部门
var ShowZone = document.querySelector(".ShowZone");
var DepartRemoveBtn = ShowZone.querySelectorAll("img");
for (var i = 0; i < DepartRemoveBtn.length; i++) {
  DepartRemoveBtn[i].onclick = function () {
    ShowZone.removeChild(this.parentNode.parentNode);
  };
}
//下面是点击公司展开部门选项（用事件委托）
var CoTitle = document.querySelector("#ShowZoneCoTitle");
var CoBtn = document.querySelectorAll(".CoBtn");
var ShowZoneCo = document.querySelector("#ShowZoneCo");
ShowZoneCo.onclick = function () {
  if (event.target.className.includes("CoBtn")) {
    ShowZoneCo.innerHTML = `<div class="BannerDepartDetail">
    <div style="color: #2561ef">
      <img
        src="../images/Page1_BannerDepartDetail.png"
        alt=""
      />&nbsp;&nbsp;产品部
    </div>
    <div>
      <img src="../images/Page1_BannerDepartRadioOn.png" alt="" />
    </div>
  </div>
  <div class="BannerDepartDetail">
    <div>
      <img
        src="../images/Page1_BannerDepartDetail.png"
        alt=""
      />&nbsp;&nbsp;营销部
    </div>
    <div>
      <img src="../images/Page1_BannerDepartRadio.png" alt="" />
    </div>
  </div>
  <div class="BannerDepartDetail">
    <div>
      <img
        src="../images/Page1_BannerDepartDetail.png"
        alt=""
      />&nbsp;&nbsp;研发部
    </div>
    <div>
      <img src="../images/Page1_BannerDepartRadio.png" alt="" />
    </div>
  </div>`;
    CoTitle.innerHTML = `<span>黛西进出口贸易公司 </span> > ${event.target.innerText}`;
    CoTitle.firstElementChild.onmouseover = function () {
      CoTitle.firstElementChild.style.cursor = "pointer";
      CoTitle.firstElementChild.style.color = "#2561ef";
    };
    CoTitle.firstElementChild.onmouseout = function () {
      CoTitle.firstElementChild.style.cursor = "auto";
      CoTitle.firstElementChild.style.color = "black";
    };
    CoTitle.firstElementChild.onclick = function () {
      CoTitle.firstElementChild.style.cursor = "auto";
      CoTitle.firstElementChild.style.color = "black";
      CoTitle.firstElementChild.onmouseover = null;
      CoTitle.firstElementChild.onmouseout = null;
      CoTitle.innerHTML = `<span>黛西进出口贸易公司</span>`;
      ShowZoneCo.innerHTML = `<div class="CoBtn">
      <img src="../images/Page1_BannerDepartCo.png" alt="" />
      XXXXXX进出口贸易有限公司（3个）
    </div>
    <div class="CoBtn">
      <img src="../images/Page1_BannerDepartCo.png" alt="" />
      YYYYYY进出口贸易有限公司（3个）
    </div>
    <div class="CoBtn">
      <img src="../images/Page1_BannerDepartCo.png" alt="" />
      ZZZZZZ进出口贸易有限公司（3个）
    </div>`;
    };
    var CoDetailBtn = document.querySelectorAll(".BannerDepartDetail");
    for (var i = 0; i < CoDetailBtn.length; i++) {
      CoDetailBtn[i].onclick = function () {
        for (var j = 0; j < CoDetailBtn.length; j++) {
          CoDetailBtn[j].firstElementChild.style.color = "black";
          CoDetailBtn[j].lastElementChild.firstElementChild.src =
            "../images/Page1_BannerDepartRadio.png";
        }
        this.firstElementChild.style.color = "#2561ef";
        this.lastElementChild.firstElementChild.src =
          "../images/Page1_BannerDepartRadioOn.png";
        ShowZone.innerHTML = `<div>
        <span
          >${this.firstElementChild.innerText}&nbsp;&nbsp;|&nbsp;&nbsp;<img
        src="../images/Page1_BannerRemove.png"
        alt=""
    />&nbsp;</span>
    </div>`;
        DepartRemoveBtn = ShowZone.querySelectorAll("img");
        for (var i = 0; i < DepartRemoveBtn.length; i++) {
          DepartRemoveBtn[i].onclick = function () {
            ShowZone.removeChild(this.parentNode.parentNode);
          };
        }
      };
    }
  }
};
//下面是确定返回选择部门的值和取消按钮
var regCnChar = /[\u4e00-\u9fa5]{1,}/g;
var ShowZoneBtn = document.querySelector("#ShowZoneBtn").children;
var BannerDepartChosen = document.getElementById("BannerDepart");
ShowZoneBtn[0].onclick = function () {
  BannerDepartLayer.fadeOut();
  BannerDepartMaskLayer.hide();
};
ShowZoneBtn[1].onclick = function () {
  var DepartChosen = ShowZone.firstElementChild.firstElementChild.innerText;
  var DepartFinal = DepartChosen.match(regCnChar)[0] + "";
  BannerDepart.lastElementChild.innerText = DepartFinal;
  BannerDepartLayer.fadeOut();
  BannerDepartMaskLayer.hide();
};

//下面是职位和员工类型选择下拉框··········································
var BannerPositionMenu = $("#BannerPositionMenu");
var BannerPositionMenuBtn = BannerPositionMenu.prev();
BannerPositionMenuBtn.click(function () {
  BannerPositionMenu.slideToggle(200);
  BannerPositionMenu.css("display", "flex");
});
var PositionBtn = BannerPositionMenu.children();
PositionBtn.click(function () {
  BannerPositionMenuBtn.text($(this).text());
  BannerPositionMenu.slideToggle(200);
});

var BannerStuffType = $("#BannerStuffType");
var BannerStuffTypeBtn = BannerStuffType.prev();
BannerStuffTypeBtn.click(function () {
  BannerStuffType.slideToggle(200);
  BannerStuffType.css("display", "flex");
});
var StuffTypeBtn = BannerStuffType.children();
StuffTypeBtn.click(function () {
  BannerStuffTypeBtn.text($(this).text());
  BannerStuffType.slideToggle(200);
});

//···············增删改······························
var AddModal = $("#AddModal");
AddModal.click(function () {
  $(this).hide();
});
var regAddName = /^[\u4e00-\u9fa5]{2,6}$/;
var regAddId = /^GH[0-9]{6}$/;
var regAddTel = /^1[3-9]\d{9}$/;
var regAddJoinDate = /^20[0-2]\d\-[0-1]\d\-[0-3]\d$/;
var regAddProbation = /^[0-6]个月$/;
var regAddConfirmation = /^20[0-2]\d\-[0-1]\d\-[0-3]\d$/;
var AddMemberBtn = $("#BannerMainBtn button").eq(0);
var AddMember = $("#AddMember");
AddMemberBtn.click(function () {
  AddMember.fadeIn();
  var AddMemberCont = document
    .querySelector("#AddMember")
    .querySelectorAll("input");
  for (var i = 0; i < AddMemberCont.length; i++) {
    AddMemberCont[i].value = "";
  }
});
var ConfirmAdd = $("#confirmAdd");
var CancelAdd = $("#cancelAdd");
CancelAdd.click(function () {
  AddMember.fadeOut();
});
ConfirmAdd.click(function () {
  var AddMemberCont = document
    .querySelector("#AddMember")
    .querySelectorAll("input");
  if (regAddName.test(AddMemberCont[1].value) == false) {
    AddModal.show();
    AddModal.text("姓名请输入2-6位汉字!");
    return;
  }
  if (regAddId.test(AddMemberCont[2].value) == false) {
    AddModal.show();
    AddModal.text("员工id未按规范输入!");
    return;
  }
  if (regAddTel.test(AddMemberCont[5].value) == false) {
    AddModal.show();
    AddModal.text("电话号码不正确!");
    return;
  }
  if (regAddJoinDate.test(AddMemberCont[6].value) == false) {
    AddModal.show();
    AddModal.text("入职日期格式错误!");
    return;
  }
  if (regAddProbation.test(AddMemberCont[7].value) == false) {
    AddModal.show();
    AddModal.text("试用期格式错误!");
    return;
  }
  if (regAddConfirmation.test(AddMemberCont[8].value) == false) {
    AddModal.show();
    AddModal.text("转正日期格式错误!");
    return;
  }
  var tempAddJson = {
    portrait: AddMemberCont[0].value + "",
    name: AddMemberCont[1].value + "",
    id: AddMemberCont[2].value + "",
    department: AddMemberCont[3].value + "",
    position: AddMemberCont[4].value + "",
    tel: AddMemberCont[5].value + "",
    joinDate: AddMemberCont[6].value + "",
    probation: AddMemberCont[7].value + "",
    confirmationDate: AddMemberCont[8].value + "",
    approval: "未发起",
    constantNum: StuffDataArr.length + "",
  };
  StuffDataArr.push(tempAddJson);
  AddMember.fadeOut();
});

var EditMemberBtn = $("#BannerMainBtn button").eq(3);
var EditMember = $("#EditMember");
var ConfirmEdit = $("#confirmEdit");
var CancelEdit = $("#cancelEdit");
var EditObjNum = 0;
var EditMemberNum = 0;
CancelEdit.click(function () {
  EditMember.fadeOut();
});
EditMemberBtn.click(function () {
  var EditMemberCont = document
    .querySelector("#EditMember")
    .querySelectorAll("input");
  for (var i = 0; i < EditMemberCont.length; i++) {
    EditMemberCont[i].value = "";
  }
  var EditObj = document.querySelector("tbody").querySelectorAll(".CheckBox");
  EditObjNum = 0;
  for (var i = 0; i < EditObj.length; i++) {
    if (EditObj[i].checked == true) {
      EditObjNum++;
    }
  }
  if (EditObjNum == 0) {
    AddModal.show();
    AddModal.text("请先从表格中勾选要修改的对象！");
  } else if (EditObjNum == 1) {
    for (var i = 0; i < EditObj.length; i++) {
      if (EditObj[i].checked == true) {
        EditMemberNum = i;
      }
    }
    EditMember.fadeIn();
    var EditMemberTr = document.querySelectorAll("tr")[EditMemberNum+1];
    $("#EditMember input")
      .eq(1)
      .val(EditMemberTr.querySelector("div").innerText);
    $("#EditMember input")
      .eq(2)
      .val(EditMemberTr.querySelectorAll("td")[2].innerText);
  } else {
    AddModal.show();
    AddModal.text("只可勾选一个进行修改操作！");
  }
  console.log(data);
  ConfirmEdit.click(function () {
    EditMemberCont = document
      .querySelector("#EditMember")
      .querySelectorAll("input");
    if (
      EditMemberCont[5].value != "" &&
      regAddTel.test(EditMemberCont[5].value) == false
    ) {
      AddModal.show();
      AddModal.text("电话号码不正确!");
    }
    EditObj = document.querySelector("tbody").querySelectorAll(".CheckBox");
    for (var i = 0; i < EditObj.length; i++) {
      if (EditObj[i].checked == true) {
        if (EditMemberCont[3].value != "") {
          StuffDataArr[data[(page - 1) * count + i].constantNum].department =
            EditMemberCont[3].value;
        }
        if (EditMemberCont[4].value != "") {
          StuffDataArr[data[(page - 1) * count + i].constantNum].position =
            EditMemberCont[4].value;
        }
        if (EditMemberCont[5].value != "") {
          StuffDataArr[data[(page - 1) * count + i].constantNum].tel =
            EditMemberCont[5].value;
        }
      }
    }
    render();
    EditObjNum = 0;
    EditMemberNum = 0;
    EditMember.fadeOut();
  });
});

var RemoveMemberBtn = $("#BannerMainBtn button").eq(6);
var RemoveMember = $("#RemoveMember");
var RemoveMemberNum = 0;
RemoveMemberBtn.click(function () {
  var RemoveObj = document.querySelector("tbody").querySelectorAll(".CheckBox");
  var RemoveObjNum = 0;
  for (var i = 0; i < RemoveObj.length; i++) {
    if (RemoveObj[i].checked == true) {
      RemoveObjNum++;
    }
  }
  if (RemoveObjNum == 0) {
    AddModal.show();
    AddModal.text("请先从表格中勾选要删除的对象！");
  } else if (RemoveObjNum == 1) {
    RemoveMemberNum = 0;
    for (var i = 0; i < RemoveObj.length; i++) {
      if (RemoveObj[i].checked == true) {
        RemoveMemberNum = i;
      }
    }
    RemoveMember.fadeIn();
    RemoveMember.css("display", "flex");
    var RemoveMemberTr = document.querySelectorAll("tr")[RemoveMemberNum + 1];
    $("#RemoveShow").text(
      "确认要删除“" + RemoveMemberTr.querySelector("div").innerText + "”吗？"
    );
    $("#confirmRemove").on("click", function () {
      StuffDataArr.splice(
        data[(page - 1) * count + RemoveMemberNum].constantNum,
        1
      );
      page = 1;
      RemoveMember.fadeOut();
      render();
      $("#confirmRemove").off("click");
    });
  } else {
    RemoveMemberNum = 0;
    for (var i = 0; i < RemoveObj.length; i++) {
      if (RemoveObj[i].checked == true) {
        RemoveMemberNum++;
      }
    }
    RemoveMember.fadeIn();
    RemoveMember.css("display", "flex");
    var RemoveMemberTr = document.querySelectorAll("tr")[RemoveMemberNum];
    $("#RemoveShow").text("确认要删除这 " + RemoveMemberNum + " 项吗？");
    $("#confirmRemove").on("click", function () {
      for (var i = RemoveObj.length - 1; i >= 0; i--) {
        if (RemoveObj[i].checked == true) {
          StuffDataArr.splice(data[(page - 1) * count + i].constantNum, 1);
        }
      }
      page = 1;
      RemoveMember.fadeOut();
      render();
      $("#confirmRemove").off("click");
    });
  }
});
$("#cancelRemove").on("click", function () {
  RemoveMember.fadeOut();
});
